<template>
  <el-dialog style="width: 100%;height: 100%"
            :modal='true'
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="580px"
             :visible.sync="visible"
             @close="canceldialog"
             :title="'Presentation Management'"
             append-to-body>
        <el-button type="primary"
                     size="mini" icon="el-icon-plus"
                     @click="addOrUpdatePresentFunc(null,'new')"
                     style="margin-bottom: 10px;">{{$t('present.manage.addNewPresent')}}</el-button>
    <div>
          <el-table v-loading="perentListLoading"
                    :data="perentList.slice((currentPage-1)*5,currentPage*5)"
                    border
                    ref="table"
                    @selection-change="handleSelectionChange"
                    style="width: 100%;">
            <el-table-column v-if="tv"
              type="selection"
              width="60">
              <template slot-scope="scope">
                <el-radio v-model="multipleSelection" :label="scope.row">&nbsp;</el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="name"
                             label="Name"
                             header-align="center"
                             min-width="70%"
                             align="left">
              <template slot-scope="scope">
                <el-link @click="presentView(scope.row)" type="primary">{{scope.row.name}}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="Action"
                             min-width="30%"
                             align="center">
              <template slot-scope="scope">
                <div style="display: flex;justify-content: space-evenly;">
                  <el-tooltip :open-delay="1000" class="item"
                              effect="dark"
                              content="Edit"
                              placement="top">
                    <i class="cuifont icon_edit"
                       style="font-size:14px;cursor: pointer;"
                       @click="addOrUpdatePresentFunc(scope.row,'edit')"></i>
                  </el-tooltip>
                  <el-tooltip :open-delay="1000" class="item"
                              effect="dark"
                              content="Delete"
                              placement="top">
                    <i class="cuifont icon_delete"
                       style="font-size:14px;cursor: pointer;"
                       @click="deletePresent(scope.row)"></i>
                  </el-tooltip>
                   <el-tooltip :open-delay="1000" class="item"
                              effect="dark"
                              content="Present View"
                              placement="top">
                    <i class="cuifont icon_eye_show"
                       style="font-size:14px;cursor: pointer;"
                       @click="presentView(scope.row)"></i>
                  </el-tooltip>
                    <el-tooltip :open-delay="1000" class="item"
                              effect="dark"
                              content="Copy Present"
                              placement="top">
                    <i class="cuifont icon_copy_link"
                       style="font-size:14px;cursor: pointer;"
                       @click="copyPresent(scope.row)"></i>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
            <el-pagination layout="prev, pager, next"
                     :total="perentList.length"
                     :page-size="5"
                     :page-count='currentPage'
                     :current-page='currentPage'
                     @current-change="handleCurrentChange">
      </el-pagination>
  </div>

    <template slot="footer">
      <el-button size="small"
                 @click="canceldialog">{{ $t('cancel') }}</el-button>
      <el-button size="small" type="primary" :disabled="multipleSelection.length===0" v-if="tv"
                 @click="confirmdialog">{{ $t('confirm') }}</el-button>
    </template>
  <addOrUpdatePresent v-if="presentItemVisible"
                      ref="presentItem"  @emitselectedgadgetPop="changeDashboard" @refreshPresentList="getInfo" ></addOrUpdatePresent>
  </el-dialog>
</template>
<script>
import addOrUpdatePresent from './add-or-update-present'
import Cookies from 'js-cookie'
export default {
  components: {
    addOrUpdatePresent
  },
  props:['tv'],
  data () {
    return {
      MessageInterval: null,
      loading: false,
      visible: false,
      dataForm: {
        id: '',
        resourceId: '',
        name: '',
        description: ''
      },
      /// /
      perentDialog: false,
      reportListResult: [],
      reportListLoading: false,
      presentItemVisible: false,
      perentList: [],
      perentListLoading: false,
      currentPage: 1,
      multipleSelection: ''
    }
  },

  computed: {

  },

  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.getInfo()
      })
    },
    getInfo () {
      this.perentListLoading = true
      const params = {
        resourceId: this.dataForm.resourceId,
        tenantCode: this.$store.state.user.tenantCode
      }
      this.$interface.reports.getGroupListTv(params)
        .then(({ data: res }) => {
          if (!res) {
            return this.$message.error(res.msg)
          }
          this.perentList = res.data
          this.perentListLoading = false
        }).catch(() => { })
    },
    canceldialog () {
      this.multipleSelection = ''
      if (this.$refs['dataForm']) {
        this.$refs['dataForm'].clearValidate()
      }
      this.dataForm = {
        name: '',
        description: ''
      }
      this.visible = false
    },
    confirmdialog() {
      this.$emit('changeDashboardtv',this.multipleSelection)
    },
    verifyForm () {
      return this.$refs['dataForm'].validate()
    },
    addOrUpdatePresentFunc (data, type) {
      if (type === 'new') {
        this.presentItemVisible = true
        this.$nextTick(() => {
          this.$refs['presentItem'].visible = true
          this.$refs['presentItem'].init()
        })
      }
      if (type === 'edit') {
        this.presentItemVisible = true
        this.$nextTick(() => {
          this.$refs['presentItem'].visible = true
          this.$refs['presentItem'].dataForm.id = data.id
          this.$refs['presentItem'].init()
        })
      }
    },
    deletePresent (data) {
      const params = {
        id: data.id
      }
      this.$interface.reports.delGroupItem(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.getInfo()
        this.$message.success(res.msg)
      }).catch(() => { })
    },
    changeDashboard () {
      this.$emit('changeDashboard')
    },
    presentView (data) {
      let routerJump = this.$router.resolve({ path: 'present', query: { presentId: data.id } })
      let windowObject = window.open(routerJump.href, '_blank')
      this.MessageInterval = setInterval(() => {
        if (windowObject) {
          windowObject.postMessage({
            sendPage: 'present',
            status: Cookies.get('token'),
            code: Cookies.get('tenant_code')
          }, '*')
        }
      }, 1000)
    },
    copyPresent (data) {
      let url = ''
      let routerJump = this.$router.resolve({ path: 'present', query: { presentId: data.id } })
      url = window.location.origin + routerJump.href
      const oInput = document.createElement('input')
      document.body.appendChild(oInput)
      oInput.value = url
      oInput.select()
      document.execCommand('Copy')
      oInput.remove()
      this.$message.success(this.$t('present.manage.copySuccess'))
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  },
  destroyed () {

  },
  created () {
    window.addEventListener('message', (event) => {
      if (event.data.message) {
        if (this.MessageInterval) {
          clearInterval(this.MessageInterval)
        }
      }
    })
  }

}
</script>

<style scoped lang="scss">
::v-deep .el-table .el-checkbox__inner {
  display: none;
}
</style>
